<template>
	<view class="box">
		<view class="write">输入验证码</view>
		<view class="info">验证码已发送至{{phone}}</view>

		<view class="contents">
			<one-input ref="hi" type="bottom" @finish="verify"></one-input>
		</view>
		<view class="codes" v-if='!isShow'>没有收到验证码,<text class="rewd">请重新获取</text></view>
		<view class="seconds" v-if='isShow'>
			<view>{{verifyTip}}s</view>
		</view>
		<view class="getcode" v-if='!isShow' @click="reGet">
			<view>重新获取</view>
		</view>
	</view>
</template>

<script>
	import oneInput from '@/components/wakary-input.vue'
	export default {
		name: "code-verify",
		data() {
			return {
				code1: '',
				code2: '',
				code3: '',
				code4: '',
				status1: false,
				status2: false,
				status3: false,
				status4: false
			};
		},
		components: {
			oneInput
		},
		computed: {
			code() {
				return `${this.code1}${this.code2}${this.code3}${this.code4}`
			}
		},
		watch: {
			code(newVal, oldVal) {
				console.log(newVal)
				if (newVal.length == 4) {
					console.log(111)
					this.verify()
				}
			},
			code1(newVal, oldVal) {
				if (newVal) {
					this.status1 = true
				} else {
					this.status1 = false
				}
			},
			code2(newVal, oldVal) {
				if (newVal) {
					this.status2 = true
				} else {
					this.status2 = false
				}
			},
			code3(newVal, oldVal) {
				if (newVal) {
					this.status3 = true
				} else {
					this.status3 = false
				}
			}


		},
		props: {
			verifyTip: {
				default: 0,
				type: null
			},
			phone: null,
			isShow: {
				default: true,
				type: null
			}

		},
		methods: {
			handClick() {
				this.$emit('setPwd', 3)
			},
			verify(val) {
				const data = {
					code: val,
					mobile: this.phone
				}
				this.$emit('verify', data)
			},
			reGet() {
				this.$emit('reGet')
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		padding-top: 97rpx;
		padding-left: 63rpx;
		padding-right: 22rpx;
	}

	.write {
		font-size: 54rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #181818;
	}

	.info {
		margin-top: 23rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888888;
	}

	.codeNumber {
		width: 90rpx;
		padding-bottom: 24rpx;
		border-bottom: 1px solid #969696;

		input {
			text-align: center;
			font-size: 54rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #181818;
		}

	}

	.codeNumber:nth-of-type(n+2) {
		margin-left: 28rpx;
	}

	.contents {
		display: flex;
		margin-top: 102rpx;
	}

	.seconds {
		display: flex;
		justify-content: flex-end;

		view {
			height: 94rpx;
			background: #DADADA;
			border-radius: 45rpx;
			text-align: center;
			line-height: 94rpx;
			width: 246rpx;
			color: #fff;
			margin-top: 247rpx;
		}
	}

	.codes {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888888;
		margin-top: 29rpx;

		text {
			color: #ED7200;
			margin-left: 10rpx;
		}
	}

	.getcode {
		display: flex;
		justify-content: flex-end;

		view {
			height: 94rpx;
			background: #ED7200;
			border-radius: 45rpx;
			text-align: center;
			line-height: 94rpx;
			width: 246rpx;
			color: #fff;
			margin-top: 247rpx;
		}
	}
</style>
